<!-- list.html文件 -->
<#include "../common/scripts.html">
<#include "../common/scripts_add.html">

<style>
	.oper-search {
		margin: 5px 10px;
	}

	.data-list-add {
		padding: 0 10px;
		margin-bottom: 100px;
	}

	/***隐藏导出按钮**/
	.dt-buttons {
		display: none;
	}

	.table > thead > tr {
		background-color: #f6f6f6;
	}

	.table > thead > tr > th {
		text-align: center;
		vertical-align: middle;
	}

	.table > tbody > tr > td {
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.i-color {
		color: #1890ff;
		margin-right: 4px;
	}

	/* btn-block-bgcolor-white样式 */
	.btn-block-bgcolor-white {
		display: inline-block;
		width: 80px;
		height: 22px !important;
		line-height: 22px !important;
		text-align: center;
	}

	.block-color-deeporange {
		color: #FE5722;
	}

	.block-color-teal {
		color: #009587;
	}
	
	#mainTable thead tr th{
		border-bottom: 0px;
	}


</style>
<!-- 查询区域 -->
<div class="oper-search oper-search-add">
	<form class="form-inline m-bottom-sm" style="position: relative;">
		<div class="form-group-query m-bottom-xs">
			<div class="form-group-query col-sm-1-5-near" style="width: 24% !important; ">
				<label class="control-label-query text-justify">系统名称<span class="span-justify"></span></label>
				<select id="applicationId" class="input-sm form-control col-sm-5-8" name="applicationId" value="${(applicationDefault.id)!}" onchange="search()">
					<!-- <option value="">未选择</option> -->
					<#list applicationList as item>
						<option value="${(item.id)!}">${(item.applicationName)!}</option>
					</#list>
				</select>
			</div>
			<div class="form-group-query col-sm-1-5-near" style="width: 24% !important;">
				<label class="control-label-query text-justify">菜单名称<span class="span-justify"></span></label>
				<input id="nameDim" name="nameDim" type="text" class="input-sm form-control col-sm-5-8">
			</div>

			<span class="btn btn-sm glyphicon glyphicon-search" onclick="search()">查询</span>
			<span class="btn btn-sm glyphicon glyphicon-refresh" onclick="refresh()">刷新</span>
			<span id="expandTrigger" class="btn btn-sm glyphicon glyphicon-collapse-down btn-deeporange" data-flag="0" onclick="triggerExpand(this)">展开</span>
			<span class="btn btn-sm glyphicon glyphicon-plus btn-teal" onclick="addAuthority(this)">新增</span>
		</div>

		<#-- 按钮区域 -->
		<!--<div class="form-group-query">
			<span class="btn btn-sm glyphicon glyphicon-search" onclick="search()">查询</span>
			<span class="btn btn-sm glyphicon glyphicon-refresh" onclick="refresh()">刷新</span>
			<span class="btn btn-sm glyphicon glyphicon-collapse-down btn-deeporange" onclick="expandAll()">展开</span>
			<span class="btn btn-sm glyphicon glyphicon-collapse-up btn-deeporange" onclick="collapseAll()">折叠</span>
			<span class="btn btn-sm glyphicon glyphicon-plus btn-teal" onclick="addAuthority(this)">新增</span>
			&lt;!&ndash;<span class="btn btn-sm glyphicon glyphicon-sort-by-order btn-purple" onclick="">保存排序</span>&ndash;&gt;
		</div>-->
	</form>
</div>

<div class="data-list data-list-add" style="">
	<table id="mainTable" class="table table-striped table-bordered table-hover"></table>
</div>

<!-- 导出窗口 -->
<iframe class="exportIframe" style="border: none; width: 0; height: 0"></iframe>

<script>

	$(function () {
		//给select控件赋值
		$("#applicationId").val("${(applicationDefault.id)!}");


	});


	/**
	 * 产生查询参数字符串。
	 * @param
	 * @return
	 * @author cjw 2020-04-02
	 */
	function getSearchParam() {
		var paramStr = "?" + $(".oper-search>form.form-inline").serialize();
		return paramStr;
	}

	function getSearchUrl() {
		var url = '/authority/getAuthorityAllByPage' + getSearchParam();
		return url;
	}

	function getOperHtml(id) {
		var html = '';
		html += '<a onclick="editAuthority(this,\'' + id + '\')" title="编辑"><i class="fa fa-pencil iconBtn" style="color: rgb(105, 170, 70);"></i></a>&nbsp;&nbsp;';
		html += '<a onclick="deleteAuthority(\'' + id + '\')" title="删除"><i class="fa fa-trash-o iconBtn" style="color: rgb(221, 90, 67);"></i></a>&nbsp;&nbsp;';
		html += '<a onclick="addSubAuthority(this,\'' + id + '\')" title="新增下级菜单"><i class="fa fa-plus-square iconBtn" style="color:#1890ff;"></i></a>&nbsp;&nbsp;';
		return html;
	}

	//展示表格信息
	var dataTable = null;
	var treeGrid = null;
	$(function () {
		dataTable = $('#mainTable').DataTable({
			/**
			 l - Length changing 改变每页显示多少条数据的控件
			 f - Filtering input 即时搜索框控件
			 t - The Table 表格本身
			 i - Information 表格相关信息控件
			 p - Pagination 分页控件
			 r - pRocessing 加载等待显示信息
			 **/
			"dom": "tr",
			"ordering": false, //禁用排序
			"processing": true,
			"serverSide": true,
			"ajax": {
				"url": getSearchUrl(), //"${ctx}/authority/getAuthorityAllByPage",
				"async": false
			},
			"language": {
				"url": "${static}/plugin/datatable/media/i18n/zh_cn.json"
			},
			"columns": [
				{
					title: "层级",
					className: 'treegrid-control',
					data: function (item) {
						if (item.children != null && item.children.length > 0) {
							return '<span class="glyphicon glyphicon-triangle-right color-777" style="color:#1890ff;"></span>';
						}
						return '';
					}
				},

				{
					data: "name",
					title: "名称",
					render: function (data2, type, row, meta) {
						var finalStr = '';
						//展示icon
						var iconClass = isEmpty(row.icon) ? '' : row.icon;
						if (!isEmpty(iconClass)) {
							var iconStr = '<i class="' + iconClass + ' i-color"></i>';
							finalStr += iconStr;
						}
						//展示imgUrl
						var imgUrl = isEmpty(row.imgUrl) ? '' : row.imgUrl;
						if (!isEmpty(imgUrl)) {
							var imgStr = '<img class="" src="${static}/' + imgUrl + '">';
							finalStr += imgStr;
						}
						//若icon,imgUrl均为空,给icon赋默认值
						if (isEmpty(iconClass) && isEmpty(imgUrl)) {
							var iconStr = '<i class="fa fa-circle-thin i-color"></i>';
							finalStr += iconStr;
						}
						//展示name
						finalStr += row.name;
						return finalStr;
					}
				},

				{data: "code", title: "编码"},
				{data: "parentCode", title: "上级编码"},
				{
					data: "type", title: "类型", className: "max-width-100", width: 100,
					render: function (row, type, data2, meta) {
						return renderType(data2.type);
					}
				},
				{data: "permission", title: "权限标识", className: "min-width-100" },
				{data: "href", title: "链接", className: "min-width-100" },
				{data: "sort", title: "排序"},
				{
					data: null,
					title: "操作",
					// className: 'min-width-80',
					render: function (data2) {
						return getOperHtml(data2.id);
					},
				}
			],
			"columnDefs": [
				{
					"defaultContent": "",
					"targets": "_all"
				}
			]
		});
		// collapseAll();
		treeGrid = new $.fn.dataTable.TreeGrid(dataTable, {
			left: 15,
			// expandAll: true,
			expandIcon: '<span class="glyphicon glyphicon-triangle-right color-777" style="color:#1890ff;"></span>',
			collapseIcon: '<span class="glyphicon glyphicon-triangle-bottom color-777" style="color:#1890ff;"></span>'
		});
		//treeGrid.expandAll();
	});


    function triggerExpand(obj) {
        var $this = $(obj);
        if($this.data("flag")=="0"){
            treeGrid.expandAll();
            $this.data("flag","1");
            $this.html("折叠");
            $this.removeClass("glyphicon-collapse-down");
            $this.addClass("glyphicon-collapse-up");
		}else{
            treeGrid.collapseAll();
            $this.data("flag","0");
            $this.html("展开");
            $this.removeClass("glyphicon-collapse-up");
            $this.addClass("glyphicon-collapse-down");
		}

    }


	//刷新菜单
	function refresh() {
		dataTable.ajax.reload();
	}

	//查询
	function search() {
		//dataTable.dataTable().api().ajax.reload(null, false);
		dataTable.ajax.url(getSearchUrl()).load(null, false);

	}

	//新增菜单
	function addAuthority(obj) {
		//若#applicationId为空
		if(isEmpty_byJqObj($("#applicationId"))){
			sys2.msg({message: "请您先选择系统名称!"},null,['40px']);
			return;
		}
		var url = "/authority/edit?applicationId="+$("#applicationId").val();
		
		/**
		 * jeesite页面相关》"新增页面(tabPageA)", 若之前打开过该页面,先将其关闭。
		 * @type {*|jQuery}
		 */
		//关闭旧的tabPage。
		var tabId = $(obj).data("tabId");
		//console.log("tabId= " + tabId);
		try {
			//console.log("js.tabPage.tabPageId=" + js.tabPage.tabPageId);
			parent.$("#" + js.tabPage.tabPageId).data("tabPanel").kill(tabId, true);
		} catch (e) {
			console.error("抛出异常!", e);
		}
		//增加tabPage。
		js.addTabPage($(obj), "新增菜单权限", url, true, true);
	}
	
	//刷新datatable
	function reload() {
		//dataTable.dataTable().api().draw();
		dataTable.api().draw();
	}


	//行选择事件
	$(document.body).off("click", ".data-list table>tbody>tr").on("click",
		".data-list table>tbody>tr", function () {
			$(this).siblings("tr").removeClass("chooseRow");
			$(this).addClass("chooseRow");
			// var id = $(this).data("id");
			// ReportRecord(id);
			// ProcessRecord(id);
			// $(".maintenance-news .rightdata").show();
		});

	//编辑当前菜单
	function editAuthority(that, id) {
		var url = "/authority/edit?id=" + id;
		js.addTabPage($(that), '编辑菜单', url, true, true);
	}

	/**
	 * 删除authority。
	 * @param
	 * @return
	 * @author cjw 2020-05-08
	 */
	function deleteAuthority(id) {
		sys2.confirm("确认要删除该菜单及其子菜单吗?", function () {
			sys2.getApiData("deleteAuthority", {id: id}, callback, "post");

			function callback(data2) {
				if (data2.success) {
					js.showMessage("删除成功!", "", "success", 1500);
					dataTable.ajax.url(getSearchUrl()).load(null, false);
				} else {
					js.showMessage(data2.message, "", "error", 1500);
				}
			}
		});
	}

	/**
	 * 新增下级菜单。
	 * @param
	 * @return
	 * @author cjw 2020-05-08
	 */
	function addSubAuthority(that, id) {
		var url = "/authority/addSubAuthority?id=" + id;
		js.addTabPage($(that), '新增下级菜单', url, true, true);
	}

	/**
	 * 渲染菜单类型。
	 * @param
	 * @return
	 * @author cjw 2020-04-27
	 */
	function renderType(type) {
		var html = '';
		switch (type) {
			case 1: {
				html += '<span class="btn-block-bgcolor-white block-color-deeporange">菜单</span>';
				break;
			}
			case 2: {
				html += '<span class="btn-block-bgcolor-white block-color-teal">权限</span>';
				break;
			}
		}
		return html;
	}


</script>


